<template>
    <div class="main-container">
        <div class="main-content">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <div class="login-container">
                        <div class="center">
                            <h1>
                                <i class="ace-icon fa fa-leaf green"></i>
                                <span class="red">站牛网</span>
                                <span class="white" id="id-text2">CRM后台管理</span>
                            </h1>

                        </div>

                        <div class="space-6"></div>

                        <div class="position-relative">
                            <div id="login-box" class="login-box visible widget-box no-border">
                                <div class="widget-body">
                                    <div class="widget-main">
                                        <h4 class="header blue lighter bigger">
                                            <img class="line-height-normal width-auto" src="/static/image/logo.png" alt="logo"/>
                                            CRM管理系统
                                        </h4>

                                        <div class="space-6"></div>

                                        <form>
                                            <fieldset>
                                                <label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input v-model="user.loginName" type="text"
                                                                   class="form-control" placeholder="用户名"/>
															<i class="ace-icon fa fa-user"></i>
														</span>
                                                </label>

                                                <label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input v-model="user.password" type="password" class="form-control"
                                                                   placeholder="密码"/>
															<i class="ace-icon fa fa-lock"></i>
														</span>
                                                </label>

                                                <!--图片验证码-->
                                                <label class="block clearfix">
                                                    <span class="block input-icon input-icon-right">
                                                        <div class="input-group">
                                                            <input v-model="user.imageCode" type="text" class="form-control" placeholder="验证码">
                                                            <span class="input-group-addon" id="kaptcha-addon">
                                                                <img v-on:click="loadImageCode()" id="image-code" alt="验证码" />
                                                            </span>
                                                        </div>
                                                    </span>
                                                </label>

                                                <div class="space"></div>

                                                <div class="clearfix">
                                                    <label class="inline">
                                                        <input v-model="rememberme" type="checkbox" class="ace"/>
                                                        <span class="lbl"> 记住我</span>
                                                    </label>

                                                    <!-- v-on:click="" = @click="" -->
                                                    <button
                                                            type="button"
                                                            class="width-35 pull-right btn btn-sm btn-primary"
                                                            @click="login()">
                                                        <i class="ace-icon fa fa-key"></i>
                                                        <span class="bigger-110">登录</span>
                                                    </button>
                                                </div>

                                                <div class="space-4"></div>
                                            </fieldset>
                                        </form>

                                        <!--                                        <div class="social-or-login center"> 去掉微信/QQ扫码登录-->
                                        <!--                                            <span class="bigger-110">Or Login Using</span>-->
                                        <!--                                        </div>-->

                                        <!--                                        <div class="space-6"></div>-->

                                        <!--                                        <div class="social-login center">-->
                                        <!--                                            <a class="btn btn-primary">-->
                                        <!--                                                <i class="ace-icon fa fa-wechat"></i>-->
                                        <!--                                            </a>-->

                                        <!--                                            <a class="btn btn-info">-->
                                        <!--                                                <i class="ace-icon fa fa-qq"></i>-->
                                        <!--                                            </a>-->

                                        <!--                                            <a class="btn btn-danger">-->
                                        <!--                                                <i class="ace-icon fa fa-github"></i>-->
                                        <!--                                            </a>-->
                                        <!--                                        </div>-->
                                    </div><!-- /.widget-main -->

                                    <div class="toolbar clearfix">
                                        <div>
                                            <a href="#" data-target="#forgot-box" class="forgot-password-link">
                                                <!--                                                <i class="ace-icon fa fa-arrow-left"></i>-->
                                                <!--                                                忘记密码-->
                                            </a>
                                        </div>

                                        <div>
                                            <a href="#" data-target="#signup-box" class="user-signup-link">

                                                <i class="ace-icon fa fa-arrow-right"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div><!-- /.widget-body -->
                            </div><!-- /.login-box -->
                        </div>
                        <div class="position-relative widget-main no-border clearfix ">
                            <h4 class="blue" id="id-company-text">&copy; 站牛网CRM后台管理系统 2020</h4>
                        </div>
                    </div>
                </div><!-- /.col -->
            </div><!-- /.row -->

        </div><!-- /.main-content -->
    </div><!-- /.main-container -->

</template>

<script>

    //mounted:页面每加载一次执行一次。解决组件初始化样式问题
    export default {
        name: "login",
        data: function () {
            return {
                user: {},
                rememberme:true, //默认勾选记住我
                imageCodeToken:""
            }
        },
        mounted: function () {
            let _this=this;
            $("body").attr("class", "login-layout blur-login");
            console.log("login");
            //初始化加载loginUser
            //let rememberUser=LocalStorage.get("loginUser");

            //引入全局变量
            let rememberUser=LocalStorage.get(LOCAL_KEY_REMEMBER_USER);
            if(rememberUser){
                _this.user=rememberUser;
            }
            //初始化时加载图片验证码
            _this.loadImageCode();
        },
        //指定@click=""点击事件，路由跳转的地址
        methods: {
            /**
             * 登录验证
             */
            login() {
                //this.$router.push("/welcome")
                let _this=this;

                //在加密之前，将明文保存到本地变量，防止加密后无法登录(不安全)
                //let pwdRem=_this.user.password;

                //二次密文判断：判断加密的密文和用户登录的密文是否相同，相同则已记住
                let md5_2=hex_md5(_this.user.password);
                //与缓存的密文做比较,获取不到，表示空对象{}
                let rememberUser_md5=LocalStorage.get(LOCAL_KEY_REMEMBER_USER) || {};
                if(md5_2!==rememberUser_md5.p_md5){
                    //如果对比一样，则进行加密
                    //密码加密+盐值
                    _this.user.password = hex_md5(_this.user.password + KEY);
                }

                //获取验证码
                _this.user.imageCodeToken=_this.imageCodeToken;
                Loading.show();
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/system/admin/user/login',_this.user)
                    .then((responseLogin)=>{
                        Loading.hide();
                        let response=responseLogin.data;
                        if(response.success){
                            console.log(response.responseData);
                            let loginUser=response.responseData;
                            /**
                             * 前端保存登录信息，这里使用sesstionStorage，关闭浏览器，下次开启还需要登录
                             * 1.h5的localStorage（关闭浏览器下次打开还保存了user）、sesstionStorage
                             * 2.js的全局变量：刷新丢掉user
                             * 3.vue的store：刷新丢掉user
                             */
                            //SessionStorage.set("USER",response.responseData);
                            //获取tool的常量
                            Tool.setUserLogin(response.responseData);
                            //只有勾选的时候才保存
                            if(_this.rememberme){

                                //1.保存明文不安全，这里做密文二次加密
                                let p_md5=hex_md5(_this.user.password)

                                //页面跳转之前，保存当前登录信息remember me，后端在登录时候已经去除了pwd，所以这里用_this
                                //LocalStorage.set("loginUser",{
                                //引入全局变量
                                LocalStorage.set(LOCAL_KEY_REMEMBER_USER,{
                                    loginName:loginUser.loginName,
                                    //password:pwdRem,
                                    //取消明文存储，改为二次密文存储
                                    password:_this.user.password,
                                    p_md5:p_md5,//保存二次加密的pwd
                                });
                            }else{
                                //若不清空本地缓存，重新打开页面时，还会显示之前登录user
                                //LocalStorage.set("loginUser",null)
                                //引入全局变量
                                LocalStorage.set(LOCAL_KEY_REMEMBER_USER,null);
                            }

                            _this.$router.push("/welcome");
                        }else{
                            Toast.warning(response.responseMsg);
                            //如果验证码错误，清空pwd
                            _this.user.password="";
                            //重新加载验证码
                            _this.loadImageCode();
                        }
                    });
            },
            /**
             * 图片验证码
             */
            loadImageCode(){
                let _this=this;
                _this.imageCodeToken=Tool.uuid(8);
                $('#image-code').attr('src',process.env.VUE_APP_SERVER + '/system/admin/kaptcha/image-code/'+_this.imageCodeToken)
            },
        }
    }
</script>

<style scoped>
    /*输入框组边距=0*/
    .input-group-addon{
        padding: 0;
    }
</style>
